<template>
  <div id="plan-detail">
    <div class="goods-card">
      <div class="goods-card-header">
        <div>
          <span class="plan-name">计划名称：{{ detailData.plan_name }}</span>
          <span class="plan-code">计划ID：{{ detailData.plan_code }}</span>
        </div>
        <div>计划状态：<span style="color: red; font-weight: 500;">{{ getTaskStatus(detailData.status) }}</span></div>
      </div>
      <div class="goods-card-body">
        <div class="plan-info-box" v-if="detailData">
          <div class="plan-info-left-box"><img :src="planGoodsInfo.goods_img" alt="" /></div>
          <div class="plan-info-right-box">
            <div>
              <i class="platform-img" :class="platformImgObject[planGoodsInfo.shop_type]"></i>
              <span class="shop-name" v-if="detailData.merchant_shop">{{ detailData.merchant_shop.name }}</span>
            </div>
            <div>商品标题：{{planGoodsInfo.goods_title}}</div>
            <div>商品ID：{{ planGoodsInfo.product_id }}</div>
            <div class="time-box">
              <span>
                <i class="time-icon el-icon-ali-time"></i>
                <span class="time">
                  开始时间：{{ detailData.start_time == 0 ? '--' : getFormatTime(parseInt(detailData.start_time * 1000)) }} -- 结束时间：{{
                    detailData.end_time == 0 ? '--' : getFormatTime(parseInt(detailData.end_time * 1000))
                  }}
                </span>
              </span>
              <span>
                <i class="time-icon el-icon-ali-time"></i>
                <span class="time">终止时间：{{ detailData.over_time == 0 ? '--' : getFormatTime(parseInt(detailData.over_time * 1000)) }}</span>
              </span>
            </div>
            <div class="other-param" v-if="planDetailType == 'sales'">
              <span>搜索展示价格：{{ detailData.show_money }}</span>
              <span>付款人数约：{{detailData.pay_person}}人</span>
              <span>商家详情页文本：{{detailData.check_content}}</span>
            </div>
            <div>备注说明：{{detailData.remark}}</div>
          </div>
        </div>
      </div>
    </div>


    <div v-if="planDetailType=='sales'">
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">设置任务信息</div>
        </div>
        <div class="detail-card-body">
          <el-table  :data="setTaskInfo" border size="mini">
            <el-table-column prop="unitPrice" label="拍下单价"></el-table-column>
            <el-table-column prop="entrance_type" label="入口类型" :formatter="getEntranceType"></el-table-column>
            <el-table-column prop="keyword" label="关键词">
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.entrance_type == 3">
                <img class="keyword-preview-img" :src="scope.row.keyword"/>
                <img slot="reference" :src="scope.row.keyword"  style="width: 50px;height: 50px">
              </el-popover>
              <div v-else>
                {{scope.row.keyword}}
              </div>
            </el-table-column>
            <el-table-column prop="timeType" label="任务时间类型"></el-table-column>
            <el-table-column prop="singularNumber" label="单数"></el-table-column>
            <el-table-column prop="piecesNumber" label="每单拍件数"></el-table-column>
            <el-table-column prop="amountsPayable" label="应付金额"></el-table-column>
            <el-table-column prop="commission" label="佣金"></el-table-column>
            <el-table-column prop="additionalCommission" label="额外佣金"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">任务完成详情</div>
        </div>
        <div class="detail-card-body">
          <el-table  :data="saleOrderDedtail" border size="mini">
            <el-table-column prop="task_code" label="任务编号"></el-table-column>
            <el-table-column prop="begin_time" label="任务开始时间"></el-table-column>
            <el-table-column prop="status_name" label="任务状态"></el-table-column>
            <el-table-column prop="check_status_name" label="审核状态"></el-table-column>
            <el-table-column prop="entrance_type" label="入口类型" :formatter="getEntranceType"></el-table-column>
            <el-table-column prop="keyword" label="关键词">
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.entrance_type == 3">
                <img class="keyword-preview-img" :src="scope.row.keyword"/>
                <img slot="reference" :src="scope.row.keyword"  style="width: 50px;height: 50px">
              </el-popover>
              <div v-else>
                {{scope.row.keyword}}
              </div>
            </el-table-column>
            <el-table-column prop="tb_name" label="推手账号"></el-table-column>
            <el-table-column prop="should_pay" label="应付金额"></el-table-column>
            <el-table-column prop="real_pay" label="实付金额"></el-table-column>
            <el-table-column prop="order_num" label="订单号"></el-table-column>
            <el-table-column prop="commission" label="佣金"></el-table-column>
            <el-table-column prop="over_time" label="完成时间"></el-table-column>
            <el-table-column align="right" v-if="detailData.is_onedragn && (detailData.is_onedragn == 1)">
              <template slot-scope="scope">
                <el-button
                  class="appeal-btn"
                  size="mini"
                  @click="goodsInfo(scope.$index)">查看副宝贝</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">任务完成进度</div>
        </div>
        <div class="detail-card-body">
          <el-table :data="taskCompletionProgress" border size="mini">
            <el-table-column prop="allNum" label="总数">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/allOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="waitingComply" label="等待执行">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/waitingOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="missedOrder" label="已派单未领取">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/waitReceiveOrder')" style="cursor: pointer;">{{scope.row.missedOrder}}</div>
              </template>
            </el-table-column>

            <el-table-column :show-overflow-tooltip="true" prop="operating" label="正在执行">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/beingExecutedOrder')" style="cursor: pointer;">{{scope.row.operating}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="pendingReview" label="待审核">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/waitCheckOrder')" style="cursor: pointer;">{{scope.row.pendingReview}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="reviewSuccess" label="审核成功">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/successOrder')" style="cursor: pointer;">{{scope.row.reviewSuccess}}</div>
              </template>
            </el-table-column>
            <el-table-column :show-overflow-tooltip="true" prop="fail" label="已失败">
              <template slot-scope="scope">
                <div @click="toOrdersListPage('/salesManage/failOrder')" style="cursor: pointer;">{{scope.row.fail}}</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">接单设置信息</div>
        </div>
        <div class="detail-card-body">
          <el-table :data="orderSettinginfo" border size="mini">
            <el-table-column prop="deliveryarea" label="投放区域"></el-table-column>
            <el-table-column prop="sex" label="推手性别"></el-table-column>
            <el-table-column prop="age" label="推手年龄"></el-table-column>
            <el-table-column prop="sellercredit" label="推手信用"></el-table-column>
            <el-table-column prop="system" label="推手机型"></el-table-column>
            <el-table-column prop="zqd" label="预约增权单"></el-table-column>
            <el-table-column prop="tk" label="淘客检查(是/否)"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">任务清单</div>
        </div>
        <div class="detail-card-body">
          <el-table :data="salesTaskList" border size="mini">
            <el-table-column prop="principal" label="本金"></el-table-column>
            <el-table-column prop="commission" label="佣金"></el-table-column>
            <el-table-column prop="additionalCommission" label="额外佣金"></el-table-column>
            <el-table-column prop="freezeAmount" label="本次合计需冻结金额"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">任务完成详情</div>
        </div>
        <div class="detail-card-body">
          <el-table :data="flowOrderDetail" border size="mini">
            <el-table-column prop="task_code" label="任务编号"></el-table-column>
            <el-table-column prop="begin_time" label="任务开始时间"></el-table-column>
            <el-table-column prop="status_name" label="任务状态"></el-table-column>
            <el-table-column prop="check_status_name" label="审核状态"></el-table-column>
            <el-table-column prop="flow_task_type_name" label="任务类型"></el-table-column>
            <el-table-column prop="entrance_type" label="入口类型" :formatter="getEntranceType"></el-table-column>
            <el-table-column prop="keyword" label="关键词">
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.entrance_type == 3">
                <img class="keyword-preview-img" :src="scope.row.keyword"/>
                <img slot="reference" :src="scope.row.keyword"  style="width: 50px;height: 50px">
              </el-popover>
              <div v-else>
                {{scope.row.keyword}}
              </div>
            </el-table-column>
            <el-table-column prop="tb_name" label="推手账号"></el-table-column>
            <el-table-column prop="commission" label="佣金"></el-table-column>
            <el-table-column prop="over_time" label="完成时间"></el-table-column>
            <el-table-column prop="collect_img" label="收藏图">
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.collect_img">
                <img class="flow-preview-img" :src="scope.row.collect_img"/>
                <img slot="reference" :src="scope.row.collect_img"  style="width: 50px;height: 50px">
              </el-popover>
            </el-table-column>
            <el-table-column prop="add_cart_img" label="加购图" >
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.add_cart_img">
                <img class="flow-preview-img" :src="scope.row.add_cart_img"/>
                <img slot="reference" :src="scope.row.add_cart_img"  style="width: 50px;height: 50px">
              </el-popover>
            </el-table-column>
            <el-table-column prop="attention_img" label="关注图" >
              <el-popover placement="right" trigger="hover" slot-scope="scope" v-if="scope.row.attention_img">
                <img class="flow-preview-img" :src="scope.row.attention_img"/>
                <img slot="reference" :src="scope.row.attention_img"  style="width: 50px;height: 50px">
              </el-popover>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">设置任务信息(任务单数)</div>
        </div>
        <div class="detail-card-body">
          <el-table  :data="taskCompletionProgress" border size="mini">
           <el-table-column prop="allNum" label="总数">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/allOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true" prop="waitingComply" label="等待执行">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/waitingOrder')" style="cursor: pointer;">{{scope.row.waitingComply}}</div>
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true" prop="missedOrder" label="已派单未领取">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/waitReceiveOrder')" style="cursor: pointer;">{{scope.row.missedOrder}}</div>
             </template>
           </el-table-column>

           <el-table-column :show-overflow-tooltip="true" prop="operating" label="正在执行">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/beingExecutedOrder')" style="cursor: pointer;">{{scope.row.operating}}</div>
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true" prop="pendingReview" label="待审核">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/waitCheckOrder')" style="cursor: pointer;">{{scope.row.pendingReview}}</div>
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true" prop="reviewSuccess" label="审核成功">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/successOrder')" style="cursor: pointer;">{{scope.row.reviewSuccess}}</div>
             </template>
           </el-table-column>
           <el-table-column :show-overflow-tooltip="true" prop="fail" label="已失败">
             <template slot-scope="scope">
               <div @click="toOrdersListPage('/flowManage/failOrder')" style="cursor: pointer;">{{scope.row.fail}}</div>
             </template>
           </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">接单设置信息</div>
        </div>
        <div class="detail-card-body">
          <el-table :data="orderSettinginfo" border size="mini">
            <el-table-column prop="deliveryarea" label="投放区域"></el-table-column>
            <el-table-column prop="sex" label="推手性别"></el-table-column>
            <el-table-column prop="age" label="推手年龄"></el-table-column>
            <el-table-column prop="sellercredit" label="推手信用"></el-table-column>
            <el-table-column prop="system" label="推手机型"></el-table-column>
            <el-table-column prop="zqd" label="预约增权单"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="detail-card">
        <div class="detail-card-header">
          <div class="title">流量任务清单</div>
          <div class="tips">佣金 = 关键词单数*服务价格</div>
        </div>
        <div class="detail-card-body">
          <el-table  :data="flowTaskList" border size="mini">
            <el-table-column prop="flowType1" label="浏览"></el-table-column>
            <el-table-column prop="flowType2" label="浏览+关注"></el-table-column>
            <el-table-column prop="flowType3" label="浏览+加购"></el-table-column>
            <el-table-column prop="flowType4" label="浏览+收藏"></el-table-column>
            <el-table-column prop="flowType5" label="浏览+加购+关注"></el-table-column>
            <el-table-column prop="flowType6" label="浏览+关注+收藏"></el-table-column>
            <el-table-column prop="flowType7" label="浏览+加购+收藏"></el-table-column>
            <el-table-column prop="flowType8" label="浏览+加购+关注+收藏"></el-table-column>
            <el-table-column prop="flowFreezeAmount" label="本次流量冻结金额"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="page-footer" v-if="isShowRevokeBtn">
      <el-button class="revoke-btn" @click="revokeTask">撤销未完成任务</el-button>
    </div>
    <el-dialog
      title="任务商品信息"
      :visible.sync="showGoodsDialog"
      :modal-append-to-body="false"
      width="700px"
      class="dialog-style flag-dialog"
      style="height: auto"
    >
      <div class="detail-card" v-if="detailData.is_onedragn && (detailData.is_onedragn == 1)">
        <div class="detail-card-header">
          <div class="title">任务商品信息</div>
        </div>
        <!--  商品信息    -->
        <el-table  :data="saleOrderDedtail[saleTaskListIndex].accessoryGoods" border size="mini">
          <el-table-column prop="goods_img" label="商品图片">
            <el-popover placement="right" trigger="hover" slot-scope="scope" >
              <img class="keyword-preview-img" :src="scope.row.goods_img"/>
              <img slot="reference" :src="scope.row.goods_img"  style="width: 50px;height: 50px">
            </el-popover>
          </el-table-column>
          <el-table-column prop="pay_money" label="商品金额"></el-table-column>
          <el-table-column prop="product_id" label="商品ID"></el-table-column>
          <el-table-column prop="buy_num" label="购买数量"></el-table-column>
          <!--          <el-table-column prop="commission" label="佣金"></el-table-column>-->
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { apiSaleDetail, apiFlowDetail, apiShopTagInfo, apiSalesRevokeSalePlan, apiFlowRevokeSalePlan } from '../../request/api.js';
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      showGoodsDialog: false,// 展示副宝贝
      saleTaskListIndex: 0,// 副宝贝所在行下标
      detailData: {},
      planGoodsInfo: {},
      planDetailType: 'sales',
      platformImgObject: {
        1: 'el-icon-ali-tb',
        2: 'el-icon-ali-tm',
        3: 'el-icon-ali-jd',
        4: 'el-icon-ali-1688_icon',
        13: 'el-icon-ali-wph',
        15: 'el-icon-ali-pdd'
      },
      entranceType: {
        1: '关键词',
        2: '淘口令',
        3: '二维码',
        4: '直播',
        5: '其他'
      },
      areaType: 1,
      planTimeType: {
        1: '平均分配',
        2: '手动分配',
        3: '定时无限制'
      },
      provinceOpitons: [
        {
          area: '华东地区',
          province: ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
          checkedCities: ['北京市', '天津市', '河北省', '山西省', '内蒙古自治区'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '东北地区',
          province: ['辽宁省', '吉林省', '黑龙江省'],
          checkedCities: ['辽宁省', '吉林省', '黑龙江省'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '华东地区',
          province: ['上海市', '江苏省', '浙江省', '安徽省', '福建省', '山东省'],
          checkedCities: ['上海市', '江苏省', '浙江省', '安徽省', '福建省', '山东省'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '华中地区',
          province: ['江西省', '河南省', '湖北省', '湖南省'],
          checkedCities: ['江西省', '河南省', '湖北省', '湖南省'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '华南地区',
          province: ['广东省', '广西壮族自治区', '海南省'],
          checkedCities: ['广东省', '广西壮族自治区', '海南省'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '西南地区',
          province: ['重庆市', '四川省', '贵州省', '云南省', '西藏自治区'],
          checkedCities: ['重庆市', '四川省', '贵州省', '云南省', '西藏自治区'],
          isIndeterminate: false,
          checkAll: true
        },
        {
          area: '西北地区',
          province: ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔族自治区'],
          checkedCities: ['陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔族自治区'],
          isIndeterminate: false,
          checkAll: true
        }
      ],
      tagsList: {},
      setTaskInfo: [],
      planId: this.$route.query.id,
      //流量冻结金额
      flowFreezeAmount: '--',
      //流量任务单数
      flowTaskSingularNumber: [
        {
          all_num: 0,
          wait_get_num: 0,
          nonedo: 0,
          success_num: 0,
          fail_num: 0,
          stop: 0
        }
      ],
      //销量任务进度
      taskCompletionProgress: [
        {
          allNum: 0,
          waitingComply: 0,
          missedOrder: 0,
          operating: 0,
          pendingReview: 0,
          reviewSuccess: 0,
          fail: 0
        }
      ],
      zqd: {
        1: '是',
        2: '否'
      },
      isShowRevokeBtn: true,
      saleOrderDedtail: [],
      flowOrderDetail: [],
      entranceType: {
        1: '关键词',
        2: '淘口令',
        3: '二维码',
        4: '直播',
        5: '其他'
      },
      salesTaskList: [
        {
          principal: 0,
          commission: 0,
          additionalCommission: 0,
          freezeAmount: 0
        }
      ],
      orderSettinginfo: [{
        deliveryarea: '--',
        sex: '--',
        age: '--',
        sellercredit: '--',
        system: '--',
        zqd: '--',
        tk: '--'
      }],
      //任务清单
      flowTaskList: [
        {
          flowType1: '--',
          flowType2: '--',
          flowType3: '--',
          flowType4: '--',
          flowType5: '--',
          flowType6: '--',
          flowType7: '--',
          flowType8: '--'
        }
      ],
       userToken: window.localStorage.getItem('token')
    };
  },
  watch: {
    //监听路由跳转
    $route: {
      handler: function(to, from) {
        if (to.path == '/plan/salesPlanDetail') {
          this.planDetailType = 'sales';
        } else {
          this.planDetailType = 'flow';
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.planDetailType == 'sales') {
      this.getSalesPlanDetail();
    } else {
      this.getFlowPlanDetail();
    }
    this.getShopTagInfo();
  },
  methods: {
    goodsInfo(index) {
      console.log(index)
      this.saleTaskListIndex = index
      this.showGoodsDialog = true// 展示副宝贝
    },
    getEntranceType(row) {
      return this.entranceType[row.entrance_type];
    },
    getTaskStatus(val) {
      var text = '';
      switch (val) {
        case 1:
          text = '等待执行';
          break;
        case 2:
          text = '正在执行';
          break;
        case 3:
          text = '执行完成';
          break;
        case 4:
          text = '人工终止';
          break;
        case 5:
          text = '创建中';
          break;
        default:
          text = '全部计划';
          break;
      }
      return text;
    },
    toOrdersListPage(path){
      this.$router.push(path);
    },
    getShopTagInfo() {
      this.$isClick(true);
      apiShopTagInfo({
        token: this.userToken
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            var arr = res.msg.tag_list;
            var stringArr = ['age_list', 'sex_list', 'model_list', 'credit_list', 'address_list'];
            for (var i in arr) {
              for (var j in stringArr) {
                if (i == j) {
                  this.$set(this.tagsList, stringArr[j], arr[i][stringArr[j]]);
                }
              }
            }
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getSalesPlanDetail() {
      this.$isClick(true);
      apiSaleDetail({
        token: this.userToken,
        id: this.planId
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.detailData = res.msg;
            this.planGoodsInfo = this.detailData.goods_info;
            this.saleOrderDedtail = this.detailData.saleTaskList;
            this.detailData.saleNum.forEach((item, index) => {
              this.setTaskInfo.push({
                unitPrice: item.pay_money ? item.pay_money : '--',
                keyword: item.keyword,
                entrance_type: item.entrance_type,
                timeType: this.planTimeType[this.detailData.allot_type],
                singularNumber: item.plan_num,
                piecesNumber: item.buy_num,
                amountsPayable: parseFloat(item.pay_money) * item.buy_num + '*' + item.plan_num,
                commission: item.commission + '*' + item.plan_num,
                additionalCommission: item.extra_commission == 0 ? 0 : item.extra_commission + '*' + item.plan_num
              });
            });
            this.getSetInfoData();
            this.salesTaskList[0].principal = this.detailData.pay.capital;
            this.salesTaskList[0].commission = this.detailData.pay.commission;
            this.salesTaskList[0].additionalCommission = this.detailData.pay.extra_commission;
            this.salesTaskList[0].freezeAmount = this.detailData.pay.all_pay_money;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getFlowPlanDetail() {
      this.$isClick(true);
      apiFlowDetail({
        token: this.userToken,
        id: this.planId
      })
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.detailData = res.msg;
            this.planGoodsInfo = this.detailData.goods_info;
            this.flowOrderDetail = this.detailData.flowTaskList;
            for (var i in this.detailData['pay']) {
              this.flowTaskList[0]['flowType' + i] = this.detailData['pay'][i];
            }
            this.$set(this.flowTaskList[0], 'flowFreezeAmount', this.detailData.all_commission);
            this.getSetInfoData();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },
    getSetInfoData() {
      //任务信息
      this.taskCompletionProgress[0].allNum = this.detailData.all_num;
      this.taskCompletionProgress[0].waitingComply = this.detailData.wait_num;
      this.taskCompletionProgress[0].missedOrder = this.detailData.wait_get_num;
      this.taskCompletionProgress[0].operating = this.detailData.real_num;
      this.taskCompletionProgress[0].pendingReview = this.detailData.wait_check_num;
      this.taskCompletionProgress[0].reviewSuccess = this.detailData.success_num;
      this.taskCompletionProgress[0].fail = this.detailData.fail_num;
      if (this.taskCompletionProgress[0].waitingComply == 0 && this.taskCompletionProgress[0].missedOrder == 0) {
        this.isShowRevokeBtn = false;
      } else {
        this.isShowRevokeBtn = true;
      }
      //接单设置信息
      if (this.detailData.placement_area == '[]' || this.detailData.placement_area == '""' || this.detailData.placement_area == '' || !this.detailData.placement_area) {
        this.detailData.placement_area = '不限';
      }
      var ite = '';
      var reg = /^\{/gi;
      var reg2 = /\}$/gi;
      if (this.detailData.placement_area == null) {
      } else {
        ite = unescape(this.detailData.placement_area.replace(/\u/g, '%u'));
        ite = ite.replace(/\{/g, '');
        ite = ite.replace(/\}/g, '');
        ite = ite.replace(/\[/g, '');
        ite = ite.replace(/\]/g, '');
      }
      ite = ite.replace(/\\/g, '');
      ite = ite.replace(/\"/g, '');
      var areaType = '';
      if (ite.indexOf('-') >= 0) {
        ite = ite.replace(/\-/g, '');
        areaType = 2;
      } else {
        ite = ite.replace(/\+/g, '');
        areaType = 1;
      }

      var provinceArr = ite.split(',');
      var areaText = '';
      for (var z in this.provinceOpitons) {
        this.provinceOpitons[z].checkedCities = [];
      }
      for (var province in this.provinceOpitons) {
        for (var i in provinceArr) {
          for (var j in this.provinceOpitons[province].province) {
            if (provinceArr[i] == this.provinceOpitons[province].province[j]) {
              this.provinceOpitons[province].checkedCities.push(provinceArr[i]);
            }
          }
        }
        if (this.provinceOpitons[province].checkedCities.length > 0) {
          areaText += this.provinceOpitons[province].checkedCities.join(',') + ',';
        }
      }

      if (areaType == '2') {
        areaText = '';
        for (var x in this.provinceOpitons) {
          var newArr = [];
          var checkedCitiesArr = this.provinceOpitons[x].checkedCities;
          if (checkedCitiesArr.length == 0) {
            this.provinceOpitons[x].checkedCities = this.provinceOpitons[x].province;
          } else {
            for (var j in this.provinceOpitons[x].province) {
              if (checkedCitiesArr.indexOf(this.provinceOpitons[x].province[j]) < 0) {
                newArr.push(this.provinceOpitons[x].province[j]);
              }
            }
            this.provinceOpitons[x].checkedCities = newArr;
          }

          if (this.provinceOpitons[x].checkedCities.length > 0) {
            areaText += this.provinceOpitons[x].checkedCities.join(',') + ',';
          }
        }
      }
      areaText = areaText.substring(0, areaText.length - 1);
      this.orderSettinginfo[0]['deliveryarea'] = areaText;

      this.orderSettinginfo[0]['zqd'] = this.zqd[parseInt(this.detailData['zqd'])];
      if (this.detailData['age_id'] == 99 || this.detailData['age_id'] == '') {
        this.orderSettinginfo[0]['age'] = '不限';
      } else {
        var ageArr = this.detailData['age_id'].split(',');
        var ageText = '';
        for (var j in ageArr) {
          for (var i in this.tagsList.age_list) {
            if (this.tagsList.age_list[i].id == ageArr[j]) {
              ageText += this.tagsList.age_list[i].tag_name + ',';
            }
          }
        }
        this.orderSettinginfo[0]['age'] = ageText.substring(0, ageText.length - 1);
      }
      //信用
      var creditTag = false;
      for (var i in this.tagsList.credit_list) {
        if (this.tagsList.credit_list[i].id == this.detailData['credit_id']) {
          this.orderSettinginfo[0]['sellercredit'] = this.tagsList.credit_list[i].tag_name;
          creditTag = false;
        } else {
          creditTag = true;
        }
      }
      if (creditTag) {
        if (this.detailData['credit_id'] == 99 || this.detailData['credit_id'] == '') {
          this.orderSettinginfo[0]['sellercredit'] = '不限';
        }
      }
      //机型
      var modelTag = false;
      for (var i in this.tagsList.model_list) {
        if (this.tagsList.model_list[i].id == this.detailData['model_id']) {
          this.orderSettinginfo[0]['system'] = this.tagsList.model_list[i].tag_name;
          modelTag = false;
        } else {
          modelTag = true;
        }
      }
      if (modelTag) {
        if (this.detailData['model_id'] == 99 || this.detailData['model_id'] == '') {
          this.orderSettinginfo[0]['system'] = '不限';
        }
      }
      //性别
      var sexTag = false;
      for (var i in this.tagsList.sex_list) {
        if (this.tagsList.sex_list[i].id == this.detailData['sex_id']) {
          this.orderSettinginfo[0]['sex'] = this.tagsList.sex_list[i].tag_name;
          sexTag = false;
        } else {
          sexTag = true;
        }
      }
      if (sexTag) {
        if (this.detailData['sex_id'] == 99 || this.detailData['sex_id'] == '') {
          this.orderSettinginfo[0]['sex'] = '不限';
        }
      }
      if (this.planDetailType == 'sales') {
        this.orderSettinginfo[0]['tk'] = this.detailData['tk_check_type'] == 1 ? '是' : '否';
      }
    },
    revokeTask() {
      this.$confirm('此操作将永久撤销该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          if (this.planDetailType == 'sales') {
            this.$isClick(true);
            apiSalesRevokeSalePlan({
              token: this.userToken,
              id: this.planId
            })
              .then(res => {
                this.$isClick(false);
                if (res.code == 1) {
                  this.$message.success(res.msg);
                  this.$router.push('./salesPlanList');
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(res => {
                this.$isClick(false);
                this.$message.error(res.msg);
              });
          } else {
            this.$isClick(true);
            apiFlowRevokeSalePlan({
              token: this.userToken,
              id: this.planId
            })
              .then(res => {
                this.$isClick(false);
                if (res.code == 1) {
                  this.$message.success(res.msg);
                  this.$router.push('./flowPlanList');
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(res => {
                this.$isClick(false);
                this.$message.error(res.msg);
              });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });
        });
    },
    getFormatTime(date) {
      date = new Date(date);
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    }
  }
};
</script>

<style lang="less">
#plan-detail {
  .goods-card {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    .goods-card-header {
      background: #ecf5ff;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: @fontTitleColor;
      .plan-code {
        margin-left: 50px;
      }
    }
    .goods-card-body {
      .plan-info-box {
        background: #ffffff;
        display: flex;
        align-items: center;
        padding: 16px;
        color: @fontSubtitleColor;
        font-size: 14px;
        .plan-info-left-box {
          img {
            width: 180px;
            height: 180px;
          }
        }
        .plan-info-right-box {
          margin-left: 16px;
          line-height: 30px;
          .platform-img {
            vertical-align: middle;
            margin-right: 10px;
            &.el-icon-ali-tb {
              color: rgb(253, 77, 15);
            }
            &.el-icon-ali-jd {
              color: rgb(241, 48, 24);
            }
            &.el-icon-ali-pdd {
              color: rgb(240, 16, 15);
            }
            &.el-icon-ali-tm {
              color: rgb(253, 17, 39);
            }
            &.el-icon-ali-wph {
              color: rgb(219, 16, 113);
            }
            &.el-icon-ali-1688_icon {
              color: rgb(255, 103, 4);
            }
            font-size: 25px;
          }
          .time-box {
            .time-icon {
              font-size: 14px;
              margin-right: 5px;
            }
            .time {
              margin-right: 20px;
            }
          }
          .other-param {
            span {
              margin-right: 50px;
            }
          }
        }
      }
    }

  }
  .detail-card {
    margin-top: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    padding-bottom: 16px;
    border-radius: 5px;
    .detail-card-header {
      background: #ecf5ff;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .title {
        line-height: 20px;
        border-left: 3px solid #666666;
        padding-left: 10px;
        font-size: 16px;
        font-weight: 700;
        color: #333333;

      }
      .tips {
        font-size: 14px;
        color: red;
        margin-left: 50px;
      }
    }
    .detail-card-body {
      padding: 0 16px;
      .el-table .cell {
         text-align: center;
      }
      .el-table thead tr, .el-table thead tr th{
      	background: #f5f7fa!important;
      }
      .el-table td, .el-table th {
      	padding: 9px 0 !important;
      }

    }
  }
  .page-footer {
    text-align: center;
    margin-top: 16px;
    .revoke-btn {
      background: @themeColor;
      color: #FFFFFF;
      padding: 12px 20px;
    }
  }
}
.el-popover {
  .keyword-preview-img {
    width: 150px;
    height: 150px;
  }
  .flow-preview-img {
    width: 150px;
    height: 200px;
  }
}
.appeal-btn {
  background: red;
  color: #fff;
  padding: 8px 15px !important;
  margin-left: 0 !important;
}
</style>
